<template>
  <div class="biao">
    <div class="daohan">
      <dao-han :daohan_index="2"></dao-han>
    </div>
    <div class="lyxz">
      <h4>领养须知：</h4>
      <p>1.领养前请先了解领养流程，并准备好领养所需的物品。</p>
      <p>2.年满18周岁,具有完全民事行为能力,能够对宠物的一生负责。</p>
      <p>3.有稳定的居住环境，例如自有住房或者经过房东同意可以饲养宠物的租赁房屋。</p>
      <p>4.有稳定的经济来源，能够负担宠物的食物、医疗、日常用品等开支。</p>
    </div>
    <div class="cwxx"
         v-for="item in cwxx"
         :key="item.pet_id">
      <h2>宠物信息：</h2>
      <p>宠物名字：{{ item.petname }}</p>
      <p>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：{{ item.gender }}</p>
      <p>是否打疫苗：{{ item.health}}</p>
      <p>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：{{ item.age}}</p>
      <p>是否绝育：{{ item.sterilization }}</p>
      <p>区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：{{ item.region }}</p>
      <p>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：{{ item.briefing }}</p>
    </div>
    <div class="">
      <h2>填写您的信息：</h2>
      <div class="biaom">
        <p>您的姓名：<el-input v-model="hello"
                    placeholder="填写您的姓名"
                    style="width: 300px" /></p>
        <p>联系方式：<el-input v-model="phone"
                    placeholder="填写您的手机号"
                    style="width: 300px" /></p>
        <p>您的住址：<el-input v-model="address"
                    style="width: 300px"
                    placeholder="xx街道xx号" /></p>
        <p>领养日期：<el-date-picker v-model="lydate"
                          :disabled-date="pickerOptions"
                          type="date"
                          placeholder="选择领养日期"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                          :size="'large'" /></p>
        <div class="but">
          <p class="qding"
             @click="que()">确认领养</p>
          <p class="quxiao"
             @click="quxiao()">取消</p>
        </div>
      </div>
      <el-dialog v-model="centerDialogVisible"
                 width="500"
                 title="是否确定领养该宠物？"
                 center
                 :align-center='true'>
        <span>

        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary"
                       @click="queding()">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>

</template>



<script>
import { onMounted, ref } from 'vue'
import DaoHan from '@/components/daohan/DaoHan.vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElLoading, ElMessage } from 'element-plus'
export default {
  components: {
    DaoHan
  },
  setup() {
    const router = useRouter()
    //姓名
    let hello = ref('')
    //联系方式
    const phonesy = /^1[3456789]\d{9}$/
    let phone = ref('')
    //住址
    let address = ref('')

    //领养日期
    let lydate = ref('')
    //限制日期
    const pickerOptions = (time) => {
      return time.getTime() < Date.now() - 86400000
    }
    // 宠物信息
    let cwxx = ref([])
    //获取宠物id
    let cw_id = localStorage.getItem('cwxx')
    //确认领养提示框
    let centerDialogVisible = ref(false)
    // 确定领养
    let que = () => {
      if (hello.value == '') {
        ElMessage({
          message: '请输入您的姓名',
          type: 'error'
        })
      } else if (phone.value == '') {
        ElMessage({
          message: '请输入您的联系方式',
          type: 'error'
        })
      } else if (!phonesy.test(phone.value)) {
        ElMessage({
          message: '请输入正确的手机号',
          type: 'error'
        })
      } else if (address.value == '') {
        ElMessage({
          message: '请输入您的住址',
          type: 'error'
        })
      } else if (lydate.value == '') {
        ElMessage({
          message: '请选择领养日期',
          type: 'error'
        })
      } else {
        centerDialogVisible.value = true
      }
    }
    let queding = () => {
      axios
        .post('/lyxinxi', {
          username: localStorage.getItem('username'),
          true_name: hello.value,
          phone: phone.value,
          pet_id: cw_id,
          adopt_time: lydate.value,
          address: address.value
        })
        .then(() => {
          // console.log(d)
          const loading = ElLoading.service({
            lock: true,
            text: '信息提交中...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
            ElMessage({
              message: '领养信息提交成功',
              type: 'success'
            })
            router.replace('/adopt')
            centerDialogVisible.value = false
          }, 2000)
        })
        .catch((err) => console.log(err))
    }
    //取消领养
    let quxiao = () => {
      router.replace('/adopt')
    }
    onMounted(() => {
      //获取领养列表
      axios
        .get('/cwxx', { params: { pet_id: cw_id } })
        .then((d) => {
          cwxx.value = d.data
        })
        .catch((err) => console.log(err))
    })

    return {
      hello,
      lydate,
      phone,
      address,
      cwxx,
      cw_id,
      centerDialogVisible,
      queding,
      que,
      quxiao,
      pickerOptions
    }
  }
}
</script>

<style scoped lang="less">
.biao {
  width: 1000px;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  margin: 0 auto;
  .daohan {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 3;
  }
  .biaom {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    p {
      margin: 20px 0;
      font-size: 20px;
    }
    .but {
      display: flex;
      .qding {
        width: 300px;
        height: 50px;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        line-height: 50px;
        border-radius: 15px;
        background-color: #eeecde;
        border-bottom: #cdbf62 2px solid;
        border-left: #cdbf62 2px solid;
        border-right: #cdbf62 2px dashed;
        border-top: #cdbf62 2px dashed;
        margin: 10px auto;
        cursor: pointer;
      }
      .quxiao {
        width: 300px;
        height: 50px;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        line-height: 50px;
        border-radius: 15px;
        background-color: #fcfcfa;
        border-bottom: #cdbf62 2px solid;
        border-left: #cdbf62 2px solid;
        border-right: #cdbf62 2px dashed;
        border-top: #cdbf62 2px dashed;
        margin: 10px auto;
        cursor: pointer;
      }
    }
  }
  .cwxx {
    p {
      margin: 10px 0;
    }
  }
}
</style>

